<template>
  <div>
    <!-- <h1>服务数据</h1> -->
    <div class="q1">
      <div class="q2">
        <span class="q3">cr-01</span>
        <i class="el-icon-caret-bottom"></i>
        <div class="q4">
          <span class="q5">cr-01</span>

          <ul class="q6">
            <li>当前通话总并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q7">0</span></li>
            <li>今日最高通话并发数 &emsp13;&emsp13;&emsp13;&emsp13;<span class="q7">0</span></li>
            <li>历史最高通话并发数 &emsp13;&emsp13;&emsp13;&emsp13;<span class="q7">6</span></li>
          </ul>

          <ul class="q8">
            <li>当前线路并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q9">0</span> &emsp13;&emsp13;&emsp13;(电路0 网络0)</li>
            <li>今日最高线路并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q9">0</span> &emsp13;&emsp13;&emsp13;(电路0 网络0)</li>
            <li>历史最高线路并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q9">7</span> &emsp13;&emsp13;&emsp13;(电路0 网络0)</li>
          </ul>
        
        </div>

        <span class="q10">共 1 条</span>

        <div class="q11">
          <span>10条/页</span>
          <i class="el-icon-arrow-down"></i>
          <el-pagination
           background
           layout="prev, pager, next"
           :total="1" class="q12">
             </el-pagination>


             <el-pagination
      layout=" jumper" class="q13">
    </el-pagination>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  },
  computed: {

  },
}
</script>
<style lang='less' scoped>
.q1{
  width: 1200px;
  height: 400px;
  background-color: rgb(255,255,255);
  position: relative;
  left: 50px;
  top: 30px;
}
.q2{
  width: 180px;
  height: 50px;
  background-color: rgb(233,243,251);
  position: absolute;
  top: 20px;
  left: 20px;
}
.q3{
  position: relative;
  left: 20px;
  top: 10px;
  color: rgb(34,157,255);
}
.el-icon-caret-bottom{
  position: relative;
  left: 110px;
  top: 10px;
  color: rgb(34,157,255);
}
.q4{
  width: 1150px;
  height: 200px;
  background-color: rgb(252,253,254);
  border: 1px solid rgb(235,238,245);
  position: relative;
  top: 40px;
}
.q5{
  position: absolute;
  top: 20px;
  left: 40px;
}
.q6{
  position: absolute;
  top: 50px;
  font-size: 16px;
}
li{
  list-style: none;
}
.q6 li{
  color: rgb(145,173,199);
}
.q7{
  color: black;
}
.q8{
  position: absolute;
  left: 400px;
  top: 50px;
}
.q9{
  color: black;
}
.q10{
  position: relative;
  top:70px;
  color: rgb(118,98,143);
  font-size: 14px;
}
.q11{
  width: 110px;
  height: 30px;
  border: 1px rgb(220,223,230) solid;
  position: relative;
  top: 45px;
  left: 90px;
  color: Rgb(139,98,122);
  font-size: 14px;
}
.q11 span{
  position: relative;
  left: 15px;
  top: 5px;
}
.el-icon-arrow-down{
  position: relative;
  left: 40px;
  top: 5px;
}
.q12{
  position: relative;
  left: 800px;
  bottom: 10px;
}
.q13{
  position: relative;
  left: 940px;
  bottom: 40px;
}
</style>